<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="BoNiu Admin - UI Elements" />
	<meta name="author" content="tangzk@yeah.net" />
	<title>BoNiu Admin | UI Elements - Panel</title>
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/dataTables.min.css">
	<link rel="stylesheet" href="assets/css/entypo.css">
	<link rel="stylesheet" href="assets/css/font.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/page_base.css">
	<script src="assets/js/libs/jquery-1.12.0.min.js"></script>
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="page-container">

		<ol class="breadcrumb bc-3">
			<li>
				<a href="main.html"><i class="entypo-home"></i>主页</a>
			</li>
			<li>
				<a href="form-basic.html">表单</a>
			</li>
			<li class="active">
				<strong>基本表单</strong>
			</li>
		</ol>

		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default" data-collapsed="0">
					<div class="panel-heading">
						<div class="panel-title">
							Default Form Inputs
						</div>
					</div>
					<div class="panel-body">
						<form role="form" class="form-horizontal form-groups-bordered">
							<div class="form-group">
								<label for="field-1" class="col-sm-3 control-label">Field 1</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-1" placeholder="Placeholder">
								</div>
							</div>

							<div class="form-group">
								<label for="field-2" class="col-sm-3 control-label">Disabled</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-2" placeholder="Placeholder" disabled>
								</div>
							</div>

							<div class="form-group">
								<label for="field-3" class="col-sm-3 control-label">Password</label>

								<div class="col-sm-5">
									<input type="password" class="form-control" id="field-3" placeholder="Placeholder (Password)">
								</div>
							</div>

							<div class="form-group">
								<label for="field-1" class="col-sm-3 control-label">File Field</label>

								<div class="col-sm-5">
									<input type="file" class="form-control" id="field-file" placeholder="Placeholder">
								</div>
							</div>

							<div class="form-group">
								<label for="field-ta0" class="col-sm-3 control-label">Textarea</label>

								<div class="col-sm-5">
									<textarea class="form-control" id="field-ta0" placeholder="Textarea"></textarea>
								</div>
							</div>

							<div class="form-group">
								<label for="field-ta" class="col-sm-3 control-label">Autogrow</label>

								<div class="col-sm-5">
									<textarea class="form-control autogrow" id="field-ta" placeholder="I will grow as you type new lines."></textarea>
								</div>
							</div>

							<div class="form-group has-error">
								<label for="field-4" class="col-sm-3 control-label">Error field</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-4" placeholder="Placeholder">
								</div>
							</div>

							<div class="form-group has-warning">
								<label for="field-5" class="col-sm-3 control-label">Warning field</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-5" placeholder="Placeholder">
								</div>
							</div>

							<div class="form-group has-success">
								<label for="field-6" class="col-sm-3 control-label">Success field</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-6" placeholder="Placeholder">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Select List</label>

								<div class="col-sm-5">
									<select class="form-control">
										<option>Option 1</option>
										<option>Option 2</option>
										<option>Option 3</option>
										<option>Option 4</option>
										<option>Option 5</option>
									</select>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-5">
									<div class="checkbox">
										<label>
											<input type="checkbox">Checkbox 1
										</label>
									</div>

									<div class="checkbox">
										<label>
											<input type="checkbox">Checkbox 2
										</label>
									</div>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-5">
									<div class="radio">
										<label>
											<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Radio Input 1
										</label>
									</div>
									<div class="radio">
										<label>
											<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Radio Input 2
										</label>
									</div>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-5">
									<button type="submit" class="btn btn-default">Sign in</button>
								</div>
							</div>
						</form>

					</div>

				</div>

			</div>
		</div>




		<div class="row">
			<div class="col-md-12">

				<div class="panel panel-default" data-collapsed="0">

					<div class="panel-heading">
						<div class="panel-title">
							Input Sizes
						</div>
					</div>

					<div class="panel-body">

						<form role="form" class="form-horizontal form-groups-bordered">

							<div class="form-group">
								<label for="field-10" class="col-sm-3 control-label">Large</label>

								<div class="col-sm-5">
									<input type="text" class="form-control input-lg" id="field-10" placeholder="Large input (.input-lg)">
								</div>
							</div>

							<div class="form-group">
								<label for="field-20" class="col-sm-3 control-label">Medium</label>

								<div class="col-sm-5">
									<input type="text" class="form-control" id="field-20" placeholder="Normal input">
								</div>
							</div>

							<div class="form-group">
								<label for="field-30" class="col-sm-3 control-label">Small</label>

								<div class="col-sm-5">
									<input type="text" class="form-control input-sm" id="field-30" placeholder="Large input (.input-sm)">
								</div>
							</div>

						</form>

					</div>

				</div>

			</div>
		</div>



		<div class="row">
			<div class="col-md-12">

				<div class="panel panel-default" data-collapsed="0">

					<div class="panel-heading">
						<div class="panel-title">
							Input Groups &amp; Addons
						</div>
					</div>

					<div class="panel-body">

						<form role="form" class="form-horizontal form-groups-bordered">

							<div class="form-group">
								<label class="col-sm-3 control-label">Left addon</label>

								<div class="col-sm-5">
									<div class="input-group">
										<span class="input-group-addon">@</span>
										<input type="text" class="form-control" placeholder="Username">
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Right addon</label>

								<div class="col-sm-5">
									<div class="input-group">
										<input type="text" class="form-control">
										<span class="input-group-addon">.00</span>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Both addons</label>

								<div class="col-sm-5">
									<div class="input-group">
										<span class="input-group-addon">$</span>
										<input type="text" class="form-control">
										<span class="input-group-addon">.00</span>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Icon addon</label>

								<div class="col-sm-5">
									<div class="input-group">
										<span class="input-group-addon"><i class="entypo-mail"></i></span>
										<input type="text" class="form-control" placeholder="Email">
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Minimal type addon</label>

								<div class="col-sm-5">
									<div class="input-group minimal">
										<span class="input-group-addon"><i class="entypo-mail"></i></span>
										<input type="text" class="form-control" placeholder="Email">
									</div>

									<br />

									<div class="input-group minimal">
										<input type="text" class="form-control" placeholder="Username">
										<span class="input-group-addon"><i class="entypo-user"></i></span>
									</div>
								</div>
							</div>


							<div class="form-group">
								<label class="col-sm-3 control-label">Buttons assigned</label>

								<div class="col-sm-5">

									<div class="input-group">
								<span class="input-group-btn">
									<button class="btn btn-success" type="button">Go!</button>
								</span>

										<input type="text" class="form-control">
									</div>

									<br />


									<div class="input-group">
										<input type="text" class="form-control">

								<span class="input-group-btn">
									<button class="btn btn-primary" type="button">Go!</button>
								</span>
									</div>

								</div>
							</div>


							<div class="form-group">
								<label class="col-sm-3 control-label">Dropdowns assigned</label>

								<div class="col-sm-5">

									<div class="input-group">
										<div class="input-group-btn">
											<button type="button" class="btn btn-gold dropdown-toggle" data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>

											<ul class="dropdown-menu dropdown-gold">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>

										<input type="text" class="form-control">
									</div>

									<br />


									<div class="input-group">
										<input type="text" class="form-control">

										<div class="input-group-btn">
											<button type="button" class="btn btn-info">Action</button>
											<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
												<i class="entypo-info"></i>
											</button>

											<ul class="dropdown-menu dropdown">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>
									</div>

								</div>

							</div>

						</form>

					</div>

				</div>

			</div>
		</div>



		<div class="row">
			<div class="col-md-12">

				<div class="panel panel-default" data-collapsed="0">

					<div class="panel-heading">
						<div class="panel-title">
							Replaced Checkboxes &amp; Radio
						</div>
					</div>

					<div class="panel-body">

						<form role="form" class="form-horizontal form-groups-bordered">

							<div class="form-group">
								<label class="col-sm-3 control-label">Checkboxes</label>

								<div class="col-sm-5">
									<div class="checkbox checkbox-replace">
										<input type="checkbox" id="chk-1" checked>
										<label>Checkbox 1</label>
									</div>

									<div class="checkbox checkbox-replace">
										<input type="checkbox" id="chk-2">
										<label>Checkbox 2</label>
									</div>

									<div class="checkbox checkbox-replace">
										<input type="checkbox" id="chk-3">
										<label>Checkbox 3</label>
									</div>

									<div class="checkbox checkbox-replace">
										<input type="checkbox" id="chk-4" disabled>
										<label>Disabled</label>
									</div>

									<div class="checkbox checkbox-replace">
										<input type="checkbox" id="chk-5" checked disabled>
										<label>Checked &amp; Disabled</label>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Radio Inputs</label>

								<div class="col-sm-5">
									<div class="radio radio-replace">
										<input type="radio" id="rd-1" name="radio1" checked>
										<label>Radio 1</label>
									</div>

									<div class="radio radio-replace">
										<input type="radio" id="rd-2" name="radio1">
										<label>Radio 2</label>
									</div>

									<div class="radio radio-replace">
										<input type="radio" id="rd-3" name="radio1">
										<label>Radio 3</label>
									</div>

									<div class="radio radio-replace">
										<input type="radio" id="rd-4" name="radio1" disabled>
										<label>Disabled</label>
									</div>

									<div class="radio radio-replace">
										<input type="radio" id="rd-5" name="radio2" checked disabled>
										<label>Checked &amp; Disabled</label>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script src="assets/js/libs/dataTables.min.js"></script>
	<script>
		$(document).ready(function () {
			$('#example').one('init.dt', function () {
				$('#example').removeClass('hidden');
			}).DataTable();
		});
	</script>
</body>
</html>